<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="text" width="300px">
<script>
    /*
        键盘事件
        keydown : 按下某个键时触发,持续按住持续触发
        keypress:  废除 ,用法同上,而且esc也会触发
        keyup:      释放某个键触发
     */
    
    /*
        一些属性
        keyCode   可以查看按键对应哪个数字
     */
    
    /*
        4.textInput事件
            其在字符被输入到可编辑区域时触发,作为对 keypress 的替代
            而 textInput 只在可编辑区域上触发。另一个区别是 textInput 只在有新字 符被插入时才会触发
            个人感受: 前面的事件都不大小写,这个突然大小写了,奇怪
     */
    const inputDom = document.querySelector('#text')
    inputDom.addEventListener('textInput',e =>{
        console.log(e,e.data,e.target.value)
    })
</script>
</body>
</html>